<template>
  <section>
    <aside>
      <ul>
        <!-- <li :class="{active:nav==='dict'}" @click="nav='dict'">数据字典</li>
        <li :class="{active:nav==='doc'}" @click="nav='doc'">电子档案</li> -->
        <li :class="{active:nav==='road'}" @click="nav='road'">路段管理</li>
        <li :class="{active:nav==='dev'}" @click="nav='dev'">设备管理</li>
      </ul>
    </aside>
    <div class="container">
      <Dict v-show="nav==='dict'"></Dict>
      <Doc v-show="nav==='doc'"></Doc>
      <Road v-show="nav==='road'"></Road>
      <Dev v-show="nav==='dev'"></Dev>
    </div>

  </section>
</template>

<script>
  import TableList from 'comp/common/TableList';
  import Dialog from 'comp/common/Dialog.vue';

  import Road from 'views/system/database/Road.vue'
  import Dict from 'views/system/database/Dict.vue'
  import Doc from 'views/system/database/Doc.vue'
  import Dev from 'views/system/database/Dev.vue'

  export default {
    name: "Database",
    components: {
      Dialog,
      TableList,
      Road,
      Doc,
      Dict,
      Dev
    },
    data() {
      return {
        nav: 'dev',
      }
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  @import "~css/system.scss";


</style>
